<!-- 首页-首页 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getBannerListApi,
		motionsListApi,
		selectNearTShopListApi,
		qrySpListApi
	} from '@/api/home.js'
	import {
		useLongLatStore
	} from '@/stores/index'
	import {
		qryShopApi
	} from '@/api/venue.js'
	import {
		getDictTypetApi,
		getCityListtApi
	} from '@/api/public.js'
	import {
		log
	} from 'util'
	// 经纬度
	const longLatStore = useLongLatStore()

	// 全局页面数据
	const data = reactive({
		bannerList: [],
		currentCity: {},
		motionsCurrent: 0,
		cityList: [],
		nearTShopList: [],
		coachList: [],
		showCitySelect: false,
		latitude: '',
		longitude: '',
		screenActive: '0',
		moreList: []
	})
	// 页面显示生命周期
	onShow(() => {


		// 获取当前城市是否已选择
		data.currentCity = uni.getStorageSync('currentCity') || {}
		init()
		// 获取小程序位置信息权限
		wx.authorize({
			scope: 'scope.userFuzzyLocation',
			success() {
				// huoqu位置信息
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						// console.log(res)
						data.latitude = res.latitude;
						data.longitude = res.longitude;
						longLatStore.setLongLat(res.latitude, res.longitude)
						// uni.setStorageSync('latitude', res.latitude);
						// uni.setStorageSync('longitude', res.longitude);
						getCityList()
					},

				})
			}
		})


	})




	// 金刚区
	const motionsList = ref([])

	onLoad(() => {
		motionsListApi('shop_type').then(res => {
			motionsList.value = toTwentyDArray(res.data);
			// console.log(twoDArray, 'twoDArray');
		})

	})
	// 一维数组转为10个一组的二维数据
	const toTwentyDArray = (arr) => {
		let result = [];
		for (let i = 0; i < arr.length; i += 10) {
			result.push(arr.slice(i, i + 10));
		}
		return result;
	}


	// 初始化方法
	const init = () => {
		getBannerListApi({

		}).then(res => {
			data.bannerList = res.data
		})
	}
	// 轮播点击
	const swiperClick = (i) => {
		console.log(i)
	}
	// 搜索模块

	// 获取城市列表
	const getCityList = () => {
		getCityListtApi({
			qryType: 3
		}).then(res => {
			data.cityList = []
			res.data.city.forEach(item => {
				if (item.list[0].name === '南京市' && !data.currentCity.code) {
					data.currentCity = item.list[0]
					uni.setStorageSync('currentCity', data.currentCity)
				}
				data.cityList.push(item.list[0])
			})
			getShopTypeList()
		})
	}
	// 切换城市
	const toggleCity = (item) => {
		data.showCitySelect = false
		if (data.currentCity.code == item.code) return
		data.currentCity = item
		uni.setStorageSync('currentCity', data.currentCity)
		getAllData()
	}

	// 门店类型字典
	let shopTypeList = []
	// 门店标签字典
	let shopTagList = []
	// 教练标签字典
	let tspTagList = []

	const getShopTypeList = () => {
		Promise.all([getDictTypetApi('shop_type'), getDictTypetApi('shop_tag'), getDictTypetApi('t_sp_tag')])
			.then(types => {
				const [shopType, shopTag, tspTag] = types;
				console.log(types, 'types');
				shopTypeList = shopType.data
				shopTagList = shopTag.data
				tspTagList = tspTag.data
				getAllData()
			})
	}
	// 全局数据获取
	const getAllData = () => {
		getCoachList()
		getNearTShopList()
		getMoreList()
	}
	// 获取附近好馆
	const getNearTShopList = () => {
		selectNearTShopListApi({
			pageSize: '3',
			pageNum: '1',
			latitude: data.latitude,
			longitude: data.longitude,
			cityCode: data.currentCity.code
		}).then(res => {
			data.nearTShopList = []
			for (const key in res.data) {
				const obj = shopTypeList.filter(type => type.dictValue == key)[0] || {}
				obj.list = res.data[key]
				data.nearTShopList.push(obj)
			}
		})
	}

	// 获取热门教练列表
	const getCoachList = () => {
		qrySpListApi({
			pageSize: '3',
			pageNum: '1',
			latitude: data.latitude,
			longitude: data.longitude,
			cityCode: data.currentCity.code
		}).then(res => {
			res.data.map((item) => {
				item.tagLabel = item.tagLabel.split("|")
			})
			data.coachList = res.data
			console.log('data.coachList:===---', data.coachList);
		})
	}
	// 更多为你推荐
	// 筛选
	const screenList = [{
		txt: '默认',
		type: '0',
	}, {
		txt: '附近',
		type: '1',
	}, {
		txt: '好评优先',
		type: '9',
	}, {
		txt: '价格最低',
		type: '4',
	}, {
		txt: '价格最高',
		type: '5',
	}]
	// 筛选
	const screenChange = item => {
		data.screenActive = item.type
		getMoreList()
	}
	// 获取更多为你推荐列表（场馆）
	const getMoreList = () => {
		qryShopApi({
			pageSize: '10',
			pageNum: '1',
			latitude: data.latitude,
			longitude: data.longitude,
			cityCode: data.currentCity.code,
			qryType: 2,
			orderByTypeList: data.screenActive == '0' ? [] : [data.screenActive]
		}).then(res => {
			data.moreList = res.data
		})
	}
	// 点击金刚区
	const motionsCLick = (dictValue) => {
		console.log('dictValue: =', dictValue);
		// uni.$emit('passImageUrl', dictValue); // 发送事件和数据
		uni.switchTab({
			url: '/pages/home/venue',
			success: function(e) {
				console.log('目标页面加载成功,携带参数并触发事件');
				uni.$emit('templateClick', dictValue);
			}
		})


	}

	// 跳转地图导航
	const jumpMapClick = () => {
		uni.navigateTo({
			url: '/subPackage/venue/map'
		})
	}
	// 查看更多教练
	const viewMoreCoachClick = () => {
		uni.switchTab({
			url: '/pages/home/coach'
		})
	}

	// 首页搜索
	const searchClick = () => {
		uni.navigateTo({
			url: `/subPackage/home/search?type=${1}`
		})
	}
</script>

<template>
	<view class="home-page">
		<!-- banner -->
		<view class="banner-box">
			<up-swiper v-if="data.bannerList.length > 0" :list="data.bannerList" keyName="image" :radius="20"
				:height="`454rpx`" :indicator="false" indicatorMode="dot"
				indicatorInactiveColor="rgba(255, 255, 255, 0.2)" :autoplay="true" @click="swiperClick"></up-swiper>
		</view>
		<!-- 搜索栏 -->
		<view class="seaech-bar">
			<view class="address">
				<text style="color: #000000;font-weight: bold;" @click="data.showCitySelect = !data.showCitySelect">{{ data.currentCity.name ?
          data.currentCity.name.slice(0, 2) : '' }}</text>
				<u-icon name="arrow-down" @click="data.showCitySelect = !data.showCitySelect"></u-icon>
				<!-- 地址选择下拉菜单 -->
				<view v-if="data.showCitySelect" class="dropdown-box">
					<view class="cnt">
						<view class="current-city-box">
							<view class="title">
								当前城市
							</view>
							<view class="current-city-info">
								<image style="width:40rpx;height:40rpx;" src="/static/images/icons/icon_address4.png" />
								<text>{{ data.currentCity.name }}</text>
							</view>
						</view>
						<view class="select-city-box">
							<view class="title">
								选择城市
							</view>
							<view class="city-list">
								<view class="item" v-for="item in data.cityList" :key="item.code"
									:class="data.currentCity.code == item.code ? 'active' : ''"
									@click="toggleCity(item)">
									{{ item.name }}
								</view>
							</view>
						</view>
						<!-- 提示 -->
						<view class="tips">
							更多城市敬请期待！
						</view>
					</view>
				</view>
			</view>
			<view class="line">
			</view>
			<view class="search-box" @click="searchClick">
				<u-icon name="search"></u-icon>
				<text class="default-value">FEELINGME·乐刻私教工232312</text>
			</view>
			<view class="search-btn" @click="searchClick">
				<text>搜索</text>
			</view>
		</view>
		<!-- 金刚区 -->
		<view class="motions-box">
			<uni-swiper-dot :info="motionsList" :current="data.motionsCurrent" field="content" :mode="'round'">
				<swiper class="swiper" :circular="false" @change="e => data.motionsCurrent = e.detail.current">
					<swiper-item v-for="(group, g) in motionsList" :key="g">
						<up-grid :border="false" :col="5">
							<up-grid-item v-for="(item, i) in group" :key="i" @click="motionsCLick(item.dictValue)">
								<image style="width: 66rpx; height: 66rpx;" :src="item.dictPic" mode="scaleToFill" />
								<text style="#000000; font-weight: Medium;">{{ item.dictLabel }}</text>
							</up-grid-item>
						</up-grid>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 附近好馆（推荐） -->
		<view class="nearby-good-venue-box">
			<view class="title">
				<text class="tag"></text>
				<text class="tit">附近好馆</text>
			</view>
			<scroll-view class="nearby-box" scroll-x enable-flex>
				<view v-for="item in data.nearTShopList" :key="item.dictValue" class="block">
					<view class="head">
						<view class="title">
							<text class="tit">{{ item.dictLabel }}</text>
							<text class="sub-tit">丨{{ item.remark }}</text>
						</view>
						<view class="more">
							<text>查看更多</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="list">
						<view v-for="(shop) in item.list" :key="shop.shopId" class="item">
							<view class="left">
								<image style="width: 156rpx;height: 156rpx;" :src="shop.shopMainPic"
									mode="scaleToFill" />
							</view>
							<view class="right">
								<view class="shop-name up-line-1">
									<text>{{ shop.shopName }}</text>
								</view>
								<view class="center">
									<view class="rate">
										<!-- 选择半星 -->
										<up-icon v-if="!shop.shopScore" name="star" color="#C0C4CC" size="16"></up-icon>
										<up-icon v-else name="star-fill" color="#FFB13B" size="16"></up-icon>
										<text>{{ shop.shopScore || '暂无评价' }}</text>
									</view>
									<view class="tags">
										<text v-for="tag in shop.tshopTagList" :key="tag" class="card">{{ shopTagList.filter(Tag =>
                      Tag.dictValue == tag)[0].dictLabel }}</text>
									</view>
								</view>
								<view class="address">
									<text class="txt up-line-1">{{ shop.addrDesc }}</text>
									<image src="/static/images/icons/icon_address1.png" mode="scaleToFill" />
									<text class="longLat">{{ shop.distanceLabel }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热门教练 -->
		<view class="hot-coach-box">
			<view class="head">
				<view class="title">
					<text class="tag"></text>
					<text class="tit">热门教练</text>
				</view>
				<view class="more" @click="viewMoreCoachClick">
					<text>查看更多</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="list">

				<view v-for="item in data.coachList" :key="item.spId"
					style="padding: 24rpx;	background-color: #fff;margin: 20rpx 0 ;" @click="goCoachDetai(item)">
					<view class="item">
						<!-- <view class="left"> -->
						<image :src="item.spAvatar" style="width: 168rpx;height: 224rpx;" mode="aspectFill" />
						<view class="right">
							<view style="    margin-left: 30rpx;">
								{{item.spName}}
							</view>
							<view
								style="display: flex; margin:  18rpx 0 0 30rpx;  line-height: 22rpx; justify-content: space-between;">
								<!-- 	<view style="display: flex;">
									<image src="/static/images/icons/vector.png" mode=""
										style="width: 20rpx; height: 18rpx;"></image>
									<text style="font-size: 22rpx;">{{item.shopName}}</text>
								</view> -->
								<view style="display: flex;">
									<image src="/static/images/icons/icon_address1.png" mode=""
										style="width: 14rpx; height: 18rpx;"></image>
									<text style="font-size: 22rpx;">{{item.distanceLabel}}</text>
								</view>
							</view>
							<view style="  width: 444rpx;  margin: 18rpx 0 4rpx 18rpx;">

								<view style="  display: flex;">
									<view class="guidance" v-for="(it,ind) in item.tagLabel" :key="ind">{{it}}
									</view>

								</view>
								<view class="score">
									<view class="score_view" style="color: #FF9D68;">{{item.score}}</view>
									<view class="score_view"
										style="border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc">
										{{item.serviceTime}}
									</view>
									<view class="score_view" style="">{{item.workYears}}</view>
								</view>
								<view style="    text-align: center; display: flex;">
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">客户评分</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">服务时长</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">从业年限</view>
								</view>
							</view>
						</view>
					</view>
					<view class=""
						style="   margin-top: 20rpx;display: flex;  justify-content: space-between;align-items: center;">
						<text style="font-size: 24rpx;">{{item.spDesc}}</text>
						<text style="white-space: nowrap;"><text
								style="color: #3F9742;font-size: 36rpx;">¥{{item.price}}</text>/次</text>
					</view>

				</view>

			</view>
		</view>
		<!-- 更多为你推荐 -->
		<view class="more-recommend-box">
			<view class="head">
				<view class="title">
					<text class="tag"></text>
					<text class="tit">更多为你推荐</text>
				</view>
				<view class="more">
					<text>查看更多</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<scroll-view class="screen-box" scroll-x enable-flex>
				<view class="item" v-for="item in screenList" :key="item.type"
					:class="item.type == data.screenActive ? 'active' : ''" @click="screenChange(item)">
					<text>
						{{ item.txt }}
					</text>
				</view>
			</scroll-view>
			<view class="list">
				<view class="item" v-for="item in data.moreList" :key="item">
					<view class="top">
						<view class="logo-box">
							<image :src="item.shopMainPic" style="width: 112rpx;height: 112rpx;" mode="scaleToFill" />
						</view>
						<view class="info">
							<view class="head">
								<text class="name">{{ item.shopName }}</text>
								<view class="distance-box">
									<image src="/static/images/icons/icon_address2.png" mode="scaleToFill" />
									<text class="distance" @click="jumpMapClick">{{ item.distanceLabel }}</text>
								</view>
							</view>
							<view class="center">
								<view class="rate">
									<!-- 选择半星 -->
									<up-icon v-if="!item.shopScore" name="star" color="#C0C4CC" size="20"></up-icon>
									<up-icon v-else name="star-fill" color="#FFB13B" size="20"></up-icon>
									<text>{{ item.shopScore || '暂无评价' }}</text>
								</view>
								<view class="tags">
									<text v-for="tag in item.tshopTagList" :key="tag" class="card">{{ shopTagList.filter(Tag =>
                    Tag.dictValue == tag)[0].dictLabel }}</text>
								</view>
							</view>
							<view class="consumption-records">
								<text>{{ item.orderCount || 0 }}人消费</text>
								<text class="tag">{{ prodBuyDesc || '暂无预约' }}</text>
							</view>
						</view>
					</view>
					<view v-if="item.shopDetailPic" class="images">
						<view class="item" v-for="(picImg, index) in item.shopDetailPic.split(',')" :key="index"
							:class="'item' + index">
							<image :src="picImg" style="width: 208rpx; height: 188rpx;" mode="scaleToFill" />
							<!-- <iamge :src="pic"  /> -->
						</view>
					</view>
					<view class="bottom">
						<rich-text :nodes="item.shopDesc"></rich-text>
						<!-- <text class="introduce">“{{ item.shopDesc }}”</text> -->
						<view class="price-box">
							<text class="price">￥{{ item.lowPrice }}</text><text class="unit">/次</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background: #F6F6F6;

		.score {
			margin: 10rpx 0;
			text-align: center;
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			// width: 444rpx;

			.score_view {
				width: 33.3%;

			}
		}





		// 搜索栏样式
		& .seaech-bar {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 32rpx;
			margin-top: -44rpx;
			height: 88rpx;
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			box-shadow: 0rpx 14rpx 27rpx 0rpx rgba(20, 93, 53, 0.1);

			& .address {

				position: relative;
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;

				&::v-deep .u-icon {
					padding-left: 12rpx;
				}

				// 地址选择下拉菜单
				& .dropdown-box {
					position: absolute;
					top: 50rpx;
					left: -32rpx;
					z-index: 9;
					width: 686rpx;
					padding-top: 40rpx;

					// overflow-x: hidden;

					// 三角形状
					&::before {
						content: '';
						position: absolute;
						left: 32rpx;
						top: 32rpx;
						z-index: 1;
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						background-color: #fff;
						transform: rotate(-45deg)
					}

					// 内容区域
					& .cnt {
						position: relative;
						z-index: 2;
						padding: 28rpx 0;
						// height: 482rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 8rpx 27rpx 0rpx rgba(20, 93, 53, 0.2);
						border-radius: 20rpx;
						text-align: left;

						// 当前城市
						& .current-city-box {
							padding: 0 32rpx;

							& .title {
								font-weight: 500;
								font-size: 24rpx;
								color: #838385;
							}

							& .current-city-info {
								margin-top: 24rpx;
								display: flex;
								align-items: center;

								& text {
									margin-left: 12rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #303133;
								}
							}
						}

						// 选择城市
						& .select-city-box {
							margin-top: 44rpx;

							& .title {
								padding: 0 32rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #838385;
							}

							& .city-list {
								padding: 0 16rpx;
								margin-top: 24rpx;
								display: flex;
								align-items: center;
								flex-wrap: wrap;

								& .item {
									margin: 0 16rpx;
									margin-bottom: 16rpx;
									width: 186rpx;
									height: 64rpx;
									line-height: 64rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
									text-align: center;
									background: #FAFAFA;
									border-radius: 48rpx;

									&.active {
										font-weight: 500;
										font-size: 28rpx;
										color: #008043;
										background: #E7FFE8;
									}
								}
							}
						}

						// 提示
						& .tips {
							margin-top: 12rpx;
							padding: 0 32rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #838385;
							line-height: 33rpx;
							text-align: center;
						}
					}
				}
			}

			& .line {
				margin-left: 36rpx;
				margin-right: 30rpx;
				width: 2rpx;
				height: 32rpx;
				background-color: #D9D9D9;
				opacity: 0.6;
			}

			// 搜索内容
			& .search-box {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #838385;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				&::v-deep .u-icon {
					padding-right: 16rpx;
				}

				& .default-value {
					display: inline-block;
					width: 288rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			// 搜索按钮样式
			& .search-btn {
				margin-right: 4rpx;
				width: 144rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				font-style: normal;
				text-transform: none;
				background: #303133;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
			}
		}

		// 金刚图样式
		& .motions-box {
			margin-top: 72rpx;
			background: linear-gradient(180deg, #FFFFFF 88%, rgba(255, 255, 255, 0) 100%);

			&::v-deep .uni-swiper__warp {
				& .swiper {
					height: 436rpx;
					background: linear-gradient(180deg, #FFFFFF 88%, rgba(255, 255, 255, 0) 100%);

					& .u-grid {
						& .u-grid-item {
							margin-top: 32rpx;
							width: 136rpx;
							height: 136rpx;

							// & .p-grid-item-box {
							//   & image {}
							// }
						}
					}
				}

				& .uni-swiper__dots-box {
					bottom: 60rpx !important;

					& .uni-swiper__dots-item {
						width: 12rpx;
						height: 12rpx;
						background: #303133;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: none;
						opacity: 0.1;

						&.uni-swiper__dots-long {
							width: 32rpx !important;
							height: 12rpx !important;
							background: linear-gradient(111deg, #303133 0%, #2BFF35 100%) !important;
							border-radius: 0rpx 8rpx 0rpx 8rpx;
							border: none !important;
							opacity: 1;
						}
					}
				}
			}


		}

		// 附件好馆模块
		& .nearby-good-venue-box {
			// padding-right: 32rpx;
			width: 100%;
			overflow-x: hidden;

			&>.title {
				display: flex;
				align-items: center;
				// margin-top: 56rpx;
				padding-left: 32rpx;

				& .tag {
					display: inline-block;
					width: 6rpx;
					height: 38rpx;
					border-radius: 0rpx 6rpx 0rpx 6rpx;
					background: linear-gradient(180deg, #303133 0%, #01EF0C 100%);
				}

				& .tit {
					margin-left: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 38rpx;
					color: #303133;
					line-height: 45rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			& .nearby-box {
				padding-right: 32rpx;
				margin-top: 22rpx;
				white-space: nowrap;
				display: flex;
				align-items: flex-start;

				& .block {
					margin: 0 20rpx;
					display: inline-block;
					padding: 24rpx;
					width: 542rpx;
					// height: 656rpx;
					background: #FFFFFF;
					border-radius: 24rpx;

					& .head {
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .title {
							margin-left: 8px;

							& .tit {
								font-weight: 500;
								font-size: 32rpx;
								color: #303133;
								line-height: 38rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							& .sub-tit {
								margin-left: 4px;
								font-weight: 400;
								font-size: 20rpx;
								color: #838385;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						& .more {
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}

					& .list {
						& .item {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin-top: 32rpx;

							& .left {
								width: 156rpx;
								height: 156rpx;
								background: #D9D9D9;
								overflow: hidden;
								border-radius: 16rpx;
							}

							& .right {
								margin-left: 16rpx;

								& .shop-name {
									display: block !important;
									width: 278rpx;
									font-weight: 500;
									font-size: 30rpx;
									color: #303133;
									line-height: 35rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}

								& .center {
									display: flex;
									align-items: center;
									margin-top: 16rpx;

									& .rate {

										display: flex;
										align-items: center;

										& text {
											margin-left: 8rpx;
											font-weight: 500;
											font-size: 28rpx;
											color: #303133;
											line-height: 33rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
										}
									}

									& .tags {
										display: flex;
										align-items: center;

										& .card {
											padding: 4rpx 12rpx;
											margin-left: 12rpx;
											font-weight: 400;
											font-size: 18rpx;
											color: #838385;
											line-height: 21rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
											background: #F5F7F6;
											border-radius: 4rpx;
										}
									}
								}

								& .address {
									display: flex;
									align-items: center;
									margin-top: 14rpx;

									& .txt {
										display: block !important;
										width: 226rpx;
										font-weight: 400;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}

									& image {
										margin-left: 12rpx;
										width: 21rpx;
										height: 21rpx;
									}

									& .longLat {
										margin-left: 4rpx;
										font-weight: 500;
										font-size: 20rpx;
										color: #303133;
										line-height: 23rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}
							}
						}
					}
				}
			}
		}

		// 热门教练
		& .hot-coach-box {
			padding: 0 32rpx;

			& .head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				margin-top: 56rpx;

				&>.title {
					display: flex;
					align-items: center;

					& .tag {
						display: inline-block;
						width: 6rpx;
						height: 38rpx;
						border-radius: 0rpx 6rpx 0rpx 6rpx;
						background: linear-gradient(180deg, #303133 0%, #01EF0C 100%);
					}

					& .tit {
						margin-left: 12rpx;
						font-weight: 600;
						font-size: 38rpx;
						color: #303133;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				& .more {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #838385;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			& .list {

				& .item {
					display: flex;
					// align-items: center;
					// justify-content: space-between;
					margin-top: 24rpx;
					// height: 218rpx;
					background: #FFFFFF;

					& .left {
						width: 168rpx;
						height: 224rpx;
					}

					& .right {

						.goldMedalCoach {
							margin-left: 10rpx;
							font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
							text-align: center;
							font-style: normal;
							text-transform: none;
							padding: 6rpx 10rpx 6rpx 10rpx;
							background: linear-gradient(121deg, #30BD25 0%, #6BE861 100%);
							border-radius: 0rpx 12rpx 12rpx 12rpx;

						}

						.guidance {
							margin-left: 11rpx;
							white-space: nowrap;
							background-color: #ccc;
							padding: 4rpx 12rpx !important;
							border-radius: 20rpx;
							font-size: 20rpx;
							width: 138rpx !important;
							text-align: center;
						}


					}
				}

				// & .item {
				// 	box-sizing: border-box;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// 	margin-top: 20rpx;
				// 	padding: 14rpx 24rpx;
				// 	width: 686rpx;
				// 	height: 218rpx;
				// 	background: #FFFFFF;
				// 	border-radius: 12rpx;

				// 	& .left {
				// 		width: 174rpx;
				// 		min-height: 182rpx;
				// 	}

				// 	& .right {

				// 		width: 440rpx;

				// 		& .top {
				// 			display: flex;
				// 			align-items: center;
				// 			justify-content: space-between;

				// 			& .name {
				// 				font-weight: 500;
				// 				font-size: 28rpx;
				// 				color: #303133;
				// 				line-height: 33rpx;
				// 				text-align: left;
				// 				font-style: normal;
				// 				text-transform: none;
				// 			}

				// 			& .distance-box {
				// 				display: flex;
				// 				align-items: center;

				// 				& image {
				// 					width: 21rpx;
				// 					height: 21rpx;
				// 				}

				// 				& .distance {
				// 					font-weight: 400;
				// 					font-size: 20rpx;
				// 					color: #838385;
				// 					line-height: 23rpx;
				// 					text-align: left;
				// 					font-style: normal;
				// 					text-transform: none;
				// 				}
				// 			}
				// 		}

				// 		& .center {
				// 			display: flex;
				// 			align-items: center;
				// 			margin-top: 11rpx;

				// 			& .rate {
				// 				display: flex;
				// 				align-items: center;

				// 				& text {
				// 					margin-left: 8rpx;
				// 					font-weight: 500;
				// 					font-size: 28rpx;
				// 					color: #303133;
				// 					line-height: 33rpx;
				// 					text-align: left;
				// 					font-style: normal;
				// 					text-transform: none;
				// 				}
				// 			}

				// 			& .tags {
				// 				display: flex;
				// 				align-items: center;

				// 				& .card {
				// 					padding: 4rpx 12rpx;
				// 					margin-left: 12rpx;
				// 					font-weight: 400;
				// 					font-size: 18rpx;
				// 					color: #838385;
				// 					line-height: 21rpx;
				// 					text-align: left;
				// 					font-style: normal;
				// 					text-transform: none;
				// 					background: #F5F7F6;
				// 					border-radius: 4rpx;
				// 				}
				// 			}
				// 		}

				// 		& .shop-info {
				// 			display: flex;
				// 			align-items: center;
				// 			margin-top: 11rpx;

				// 			& image {
				// 				margin-right: 6rpx;
				// 				width: 20rpx;
				// 				height: 19rpx;
				// 			}

				// 			& text {
				// 				display: inline-block !important;
				// 				width: 288rpx;
				// 				font-weight: 400;
				// 				font-size: 20rpx;
				// 				color: #838385;
				// 				line-height: 23rpx;
				// 				text-align: left;
				// 				font-style: normal;
				// 				text-transform: none;
				// 				overflow: hidden;
				// 				text-overflow: ellipsis;
				// 				white-space: nowrap;
				// 			}
				// 		}

				// 		& .price-box {
				// 			font-weight: 500;
				// 			font-size: 20rpx;
				// 			color: #838385;
				// 			line-height: 23rpx;
				// 			font-style: normal;
				// 			text-transform: none;
				// 			text-align: right;

				// 			& .price {
				// 				font-weight: 500;
				// 				font-size: 36rpx;
				// 				line-height: 42rpx;
				// 				text-align: left;
				// 				font-style: normal;
				// 				text-transform: none;
				// 				background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
				// 				background-clip: text;
				// 				-webkit-background-clip: text;
				// 				-webkit-text-fill-color: transparent;

				// 			}
				// 		}
				// 	}
				// }
			}
		}

		// 更多为你推荐
		& .more-recommend-box {
			padding-bottom: 54rpx;
			width: 100%;
			overflow-x: hidden;

			&>.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;
				margin-top: 56rpx;

				&>.title {
					display: flex;
					align-items: center;

					& .tag {
						display: inline-block;
						width: 6rpx;
						height: 38rpx;
						border-radius: 0rpx 6rpx 0rpx 6rpx;
						background: linear-gradient(180deg, #303133 0%, #01EF0C 100%);
					}

					& .tit {
						margin-left: 12rpx;
						font-weight: 600;
						font-size: 38rpx;
						color: #303133;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				& .more {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #838385;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			& .screen-box {
				padding-left: 32rpx;
				margin-top: 22rpx;
				white-space: nowrap;

				& .item {
					margin-right: 16rpx;
					padding: 12rpx 32rpx;
					display: inline-block;
					font-weight: 400;
					font-size: 28rpx;
					color: #303133;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					background-color: #FFFFFF;
					border-radius: 80rpx;

					&.active {
						& text {
							font-weight: 500;
							background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
						}

					}
				}
			}

			& .list {
				margin-top: 24rpx;
				padding: 0 32rpx;

				&>.item {
					box-sizing: border-box;
					margin-top: 16rpx;
					padding: 24rpx;
					width: 686rpx;
					background: #FFFFFF;
					border-radius: 24rpx;

					& .top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .logo-box {
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						& .info {
							width: 508rpx;

							& .head {
								display: flex;
								align-items: center;
								justify-content: space-between;

								& .name {
									font-weight: 500;
									font-size: 28rpx;
									color: #303133;
									line-height: 33rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}

								& .distance-box {
									& image {
										width: 21rpx;
										height: 21rpx;
									}

									& .distance {
										font-weight: 400;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}
							}

							& .center {
								display: flex;
								align-items: center;
								margin-top: 11rpx;

								& .rate {
									display: flex;
									align-items: center;

									& text {
										margin-left: 8rpx;
										font-weight: 500;
										font-size: 28rpx;
										color: #303133;
										line-height: 33rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}

								& .tags {
									display: flex;
									align-items: center;

									& .card {
										padding: 4rpx 12rpx;
										margin-left: 12rpx;
										font-weight: 400;
										font-size: 18rpx;
										color: #838385;
										line-height: 21rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										background: #F5F7F6;
										border-radius: 4rpx;
									}
								}
							}

							& .consumption-records {
								margin-top: 7rpx;
								font-weight: 400;
								font-size: 20rpx;
								color: #838385;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;

								& .tag {
									margin-left: 8rpx;
									color: #00B608;
								}
							}
						}
					}

					& .images {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 28rpx;

						& .item {
							width: 204rpx;
							height: 188rpx;
							background-color: #ccc;
							overflow: hidden;

							&:first-child {
								border-radius: 24rpx 0rpx 0rpx 24rpx;
							}

							&:last-child {
								border-radius: 0rpx 24rpx 24rpx 0rpx;
							}
						}
					}

					& .bottom {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .introduce {
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						& rich-text {
							width: 500rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						& .price-box {
							margin-top: 20rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #838385;
							line-height: 23rpx;
							font-style: normal;
							text-transform: none;
							text-align: right;

							& .price {
								font-weight: 500;
								font-size: 36rpx;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;

							}
						}
					}
				}
			}
		}
	}
</style>